<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="outer">
			<div class="box1">	
		</div>
		</div>
	</body>
</html>

<style type="text/css">
	.box1{
		width: 200px;
		height: 400px;
		background-color: #FF0000;
		/* 元素水平方向布局：元素在欺负元素中水平方向的布局有以下几个属性共同决定 margin-left border-left padding-left width margin-right border-right padding-right*/
		/* margin-left+border-left+padding-left+width+margin-right+border-right+padding-right = 父元素内容区宽度，等式必须满足，如果不成立称为过渡约束，如果七个值中没有auto的情况，会自动调整margin-right*/
		/* width margin-left margin-right可以设置为auto，如果某个值为auto，会自动调整auto的值使等式成立 */
		/* width宽度默认就是auto ,且width 的auto优先级大于margin-left margin-right*/
		margin:0 auto;
	}
	.outer{
		width: 800px;
		height: 200px;
		border: 1px solid;
		/* 子元素在父元素的内容区里排列，如果子元素大小超过内容区，会从父元素中溢出 */
		/* 使用overflow设置溢出的子元素 */
		/* 可选值：visible默认值，在父元素外部显示  hidden 溢出的内容被裁减 scroll生成两个滚动条查看完整内容 auto根据需要生成滚动条*/
		/* overflow-x单独处理水平方向，overflow-x单独处理垂直方向 */
		overflow: auto;
	}
</style>
